import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter/material.dart';

class MineScreen extends StatefulWidget {
  const MineScreen({super.key});

  @override
  State<MineScreen> createState() => _MineScreenState();
}

class _MineScreenState extends State<MineScreen> {

  final List<String> items = List.generate(20, (index) => 'Item ${index + 1}');

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => _sliverBuilder(context),
      body: SingleChildScrollView(
        child: Column(
          children: List.generate(22, (index) {
            return Container(
              height: 50,
              alignment: Alignment.center,
              color: Colors.teal[100 * ((index % 9) + 1)],
              child: Text('Grid Item $index'),
            );
          }),
        ),
      )
    );
  }

  List<Widget> _sliverBuilder(BuildContext context) {
    return [
      SliverOverlapAbsorber(
        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
        sliver: SliverAppBar(
          elevation: 0.0,
          centerTitle: true,
          expandedHeight: 100.0, // 不随着滑动隐藏标题
          pinned: true, // 固定在顶
          flexibleSpace: FlexibleSpaceBar(
            title: Text('订单',),
            titlePadding: const EdgeInsetsDirectional.only(start: 16.0, bottom: 14.0),
            collapseMode: CollapseMode.pin,
          ),
          actions: [
            IconButton(
              onPressed: () {

              },
              tooltip: '搜索',
              icon: Image.asset('assets/images/profile/icon_xiaoxi.png',
                width: 22.0,
                height: 22.0,
              ),
            )
          ],
        ),
      ),
    ];
  }

  // @override
  // Widget build(BuildContext context) {
  //   return Scaffold(
  //     body: CustomScrollView(
  //       slivers: [
  //         SliverAppBar(
  //           pinned: true,
  //           expandedHeight: 200.w,
  //           stretch: true,
  //           forceElevated: true,
  //           flexibleSpace: FlexibleSpaceBar(
  //             collapseMode: CollapseMode.parallax,
  //             centerTitle: false,
  //             title: Container(
  //               width: 60.w,
  //               height: 60.w,
  //               decoration: BoxDecoration(
  //                 image: const DecorationImage(
  //                   fit: BoxFit.cover,
  //                   image: NetworkImage("https://img.js.design/assets/img/62c2af5112e410e8b0fe489e.png"),
  //                 ),
  //                 borderRadius: BorderRadius.circular(40.w),
  //               ),
  //             ).
  //             stretchModes: [
  //               StretchMode.blurBackground,
  //             ],
  //           ),
  //           actions: [
  //             IconButton(
  //               onPressed: () {},
  //               icon: Image.asset(
  //                 "assets/images/profile/icon_xiaoxi.png",
  //                 width: 24.0.w,
  //                 height: 24.0.w,
  //               ),
  //             ),
  //           ],
  //         ),
  //         SliverPersistentHeader(
  //           pinned: false,
  //           delegate: MySliverHeaderDelegate(),
  //         ),
  //         SliverGrid(
  //           gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  //             crossAxisCount: 3,
  //             crossAxisSpacing: 4.0,
  //             mainAxisSpacing: 4.0,
  //           ),
  //           delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
  //               return Container(
  //                 alignment: Alignment.center,
  //                 color: Colors.teal[100 * ((index % 9) + 1)],
  //                 child: Text('Grid Item $index'),
  //               );
  //             },
  //             childCount: 30, // 30 grid items
  //           ),
  //         ),
  //       ],
  //     ),
  //   );
  // }

  Widget _buildUserService() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.w, horizontal: 15.w,),
      decoration: const BoxDecoration(
        color: Color.fromRGBO(255, 255, 255, 1),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Container(
                width: 60.w,
                height: 60.w,
                decoration: BoxDecoration(
                  image: const DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage("https://img.js.design/assets/img/62c2af5112e410e8b0fe489e.png"),
                  ),
                  borderRadius: BorderRadius.circular(40.w),
                ),
              ),
              SizedBox(width: 8.w,),
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    '低调的鸡哥',
                    style: TextStyle(
                      fontSize: 14.w,
                      color: const Color.fromRGBO(28, 28, 28, 1),
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class MySliverHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    double headHeight = maxExtent - shrinkOffset;
    headHeight = headHeight.clamp(minExtent, maxExtent); // 确保高度在范围内

    // 设置顶部间距
    double topPadding = 20.0;
    double minAvatarSize = 10.0.w; // 头像最小留白

    return Container(
      color: Colors.blue,
      alignment: Alignment.bottomLeft,
      height: headHeight,
      padding: EdgeInsets.only(left: 16, bottom: 16, top: topPadding),
      child: Stack(
        children: [
          Row(
            children: [
              CircleAvatar(
                radius: (headHeight / 8).clamp(minAvatarSize, headHeight / 2), // 设置头像半径
                backgroundImage: NetworkImage('https://via.placeholder.com/150'),
              ),
              SizedBox(width: 8),
              // 确保文字在吸顶后依然可见
              Text(
                '吸顶内容',
                style: TextStyle(
                  fontSize: headHeight / 4,
                  color: Colors.white,
                ),
              ),
            ],
          ),
          Positioned(
            right: 10.w,
            child: Container(
              width: 60.w,
              height: 60.w,
              decoration: BoxDecoration(
                image: const DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage("https://img.js.design/assets/img/62c2af5112e410e8b0fe489e.png"),
                ),
                borderRadius: BorderRadius.circular(40.w),
              ),
            ),
          )
        ],
      )
    );
  }

  @override
  double get maxExtent => 100.w;

  @override
  double get minExtent => 60.w;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}